<template>
    <table border="1">
        <tr>
            <td colspan="2" style="text-align:center;font-size:30px;">会员添加</td>
        </tr>
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" v-model="info.Name" placeholder="请输入用户名"/>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" v-model="info.Pwd" placeholder="请输入密码"/>
            </td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td>
                <input type="text" v-model="info.Email" placeholder="请输入邮箱"/>
            </td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>
                <input type="text" v-model="info.Age" placeholder="请输入年龄"/>
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" :value="true" v-model="info.Sex" />男
                <input type="radio" :value="false" v-model="info.Sex" />女
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">
                <input type="button" value="添加" @click="addMember"/>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios'

//创建响应式数据(用于保存会员信息)
const info=ref({
    Name:"",
    Pwd:"",
    Email:"",
    Age:0,
    Sex:true
})

//保存会员信息
const addMember=()=>{
    // if(info.value.Name=="")
    // {
    //     alert("用户名不能为空");
    //     return;
    // }

    axios.post("https://localhost:7176/api/Member/AddMember",info.value)
    .then(res=>{
         if(res.data>0){
            alert("添加成功");
         }
         else{
            alert("添加失败");
         }
    })
    .catch(err=>{
        console.log(err);
    })
}

</script>